<template>
	<view class="video-info" v-if="videoInfo">
		<video class="video" :src="videoInfo.link" autoplay object-fit="contain"></video>
		<view class="pro-btn" @click="showPro" v-if="!showProduct"><image src="@/static/svg/icon6.svg"></image><text class="label">视频同款商品</text><u-icon name="arrow-right" size="24" color="#333"></u-icon></view>
		<u-popup v-model="showProduct" mode="bottom" closeable :border-radius="20">
			<view class="goods-list">
				<view class="goods-list-tit">视频同款商品</view>
				<view class="goods-item" v-for="(data,index) in videoInfo.video_goods" :key="index" @click="goGoodsInfo(data)">
					<image :src="data.image_thumb" mode="aspectFill"></image>
					<view class="goods-info">
						<view class="goods-name">{{data.goods_name}}</view>
						<view class="goods-sales">已售{{data.sold_num}}</view>
						<view class="goods-price">￥<text>{{data.retail_price}}</text></view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showProduct: false,
				video_id: '',
				videoInfo: ''
			}
		},
		onLoad(options) {
			this.video_id = options.video_id
			this.init()
		},
		methods: {
			async init(){
				let res = await this.$u.api.VideoInfo({video_id: this.video_id})
				this.videoInfo = res.datas
			},
			showPro(){
				this.showProduct = true
			},
			goGoodsInfo(data){
				uni.navigateTo({
					url: `/pages/product-info/product-info?goods_id=${data.goods_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-info{
		height: 100vh;
		video{
			width: 100%;
			height: 100vh;
		}
		.pro-btn{
			position: fixed;
			height: 72rpx;
			display: flex;
			align-items: center;
			padding: 0 26rpx;
			background: rgba(255,255,255,0.5);
			border-radius: 20rpx;
			left: 30rpx;
			bottom: 100rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.label{
				padding: 0 10rpx;
			}
		}
		.goods-list{
			padding: 30rpx;
			&-tit{
				font-weight: bold;
			}
			.goods-item{
				margin-top: 30rpx;
				display: flex;
				align-items: flex-start;
				image{
					width: 160rpx;
					height: 160rpx;
					border-radius: 20rpx;
					border: solid 2rpx #CCC;
				}
				.goods-info{
					flex: 1;
					min-width: 0;
					margin-left: 30rpx;
					.goods-name{
						font-size: 34rpx;
						font-weight: bold;
					}
					.goods-sales{
						margin-top: 12rpx;
						font-size: 24rpx;
					}
					.goods-price{
						color: #F59359;
						margin-top: 12rpx;
						font-size: 24rpx;
						font-weight: bold;
						text{
							font-size: 36rpx;
						}
					}
				}
			}
		}
	}
</style>
